<template>
  <el-popover
      placement="bottom"
      width="300"
      popper-class="notice-popover"
      @show="loadNotice"
      trigger="hover">
    <el-tabs :stretch="true">
      <el-tab-pane>
            <span slot="label">
              <span style="color: #f3b977">未读-{{ noticeListNoRead.length }}</span>
            </span>
        <div style="overflow: auto;height: 300px">
          <div v-show="noticeListNoRead.length > 0" title="点击查看公告"
               v-for="(no,index) in noticeListNoRead" :key="no.id"
               style="cursor: pointer;"
               @click="showNotice(no)">
            <div style="display: flex;
            align-items: center;
            margin: 10px;
            border-radius: 4px;
            padding: 3px;
            background-color: #f1efef">
              <el-avatar :src="no.avatar"></el-avatar>
              <div style="padding-left: 3px">
                <div style="font-size: initial">{{ no.title }}</div>
                <div style="font-size: small">
                  {{ no.createTime }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane>
            <span slot="label">
              <span style="color: #77a3f3">已读-{{ noticeListRead.length }}</span>
            </span>
        <div style="overflow: auto;height: 300px">
          <div v-show="noticeListRead.length > 0" title="点击查看公告"
               v-for="(no,index) in noticeListRead" :key="no.id"
               style="cursor: pointer;"
               @click="showNotice(no)">
            <div style="display: flex;
            align-items: center;
            margin: 10px;
            border-radius: 4px;
            padding: 3px;
            background-color: #f1efef">
              <el-avatar :src="no.avatar"></el-avatar>
              <div style="padding-left: 3px">
                <div style="font-size: initial">{{ no.title }}</div>
                <div style="font-size: small">
                  {{ no.createTime }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <div style="text-align: center;padding-bottom: 10px;padding-top: 10px">
        <el-button type="primary" plain @click="oper('all_read')">全部已读</el-button>
        <el-button type="warning" plain @click="oper('clean')">清空消息</el-button>
        <el-button type="primary" plain @click="oper('load_many')">加载未读</el-button>
      </div>
    </el-tabs>

    <div v-show="noticeList.length === 0" style="text-align: center">
      <span>无历史公告</span>
    </div>
    <span slot="reference" title="查看通知" class="tool-fox">
        <el-badge :value="noticeListNoRead.length" class="notice" :hidden="noticeListNoRead.length <= 0">
          <i style="font-size: 24px" class="el-icon-bell"></i>
        </el-badge>
			</span>
  </el-popover>
</template>

<script>
module.exports = {
  data() {
    return {
      noticeList: []
    }
  },
  computed: {
    noticeListRead: function () {
      return this.noticeList.filter(no => no.readStatus === 'Y');
    },
    noticeListNoRead: function () {
      return this.noticeList.filter(no => no.readStatus === 'N');
    }
  },
  methods: {
    oper (ty){
      switch (ty) {
        case 'all_read':
          sa.msgInfo('全部已读')
          break;
        case 'clean':
          sa.msgInfo('清除消息')
          break;
        case 'load_many':
          sa.msgInfo('加载更多')
          break;
      }
    },
    showNotice: function (notice) {
      layer.open({
        title: notice.title,
        type: 1,
        content: notice.content,//这里content是一个普通的String
        shadeClose: false,	// 是否点击遮罩关闭
        maxmin: true, // 显示最大化按钮
        shade: 0.8,		// 遮罩透明度
        scrollbar: false,	// 屏蔽掉外层的滚动条
        moveOut: true,		// 是否可拖动到外面
        area: ['60%', '80%'],	// 大小
        btn: ['确认收到'],
        yes: (index, layero) => {
          sa.ajax('/notice/reading', {id: notice.id}, (res) => {
            sa.alert(res.msg, () => {
              this.loadNotice()
            })
          }, {type: 'get'})
        }
      });
    },
    loadNotice: function () {
      sa.ajax('/notice/get-tool-list', {}, (res) => {
        this.noticeList = res.data
      }, {type: 'get', msg: null})
    },
  },
  created() {
    this.loadNotice()
  }
}
</script>

<style>
.el-tabs .el-tabs__header {
  padding: 0;
  position: relative;
  margin: 0;
}
.notice .el-badge__content {
  top: 10px;
}
</style>
